<template>
  <div>
    <h1>watch监听简单数据</h1>
    <h2>零花钱 {{ money }}</h2>
    <button @click="money += 100">getMoney</button>
    <h2>{{ badPerson }}</h2>
    <button @click="badPerson.age++">坏人长大了</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      money: 1000,
      badPerson: {
        name: "zs",
        age: 30,
      },
    };
  },
  // watch 侦听器 监听一些属性变化
  // '(不需要this.)被监听的属性名' (newValue, oldValue) {} - 监听简单类型数据（注意对象里的某一个属性 简单数据也能监听）
  // 新的值会用的比较多 老的值用的不多可以了解下
  watch: {
    money(val, oldValue) {
      console.log("新的值", val, "老的值", oldValue);
    },
    "badPerson.age"(val, oldValue) {
      console.log("新的值", val, "老的值", oldValue);
    },
  },
};
</script>

<style>
</style>